<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    template="layout.xhtml">

	<ui:define name="header">
	</ui:define>
	<ui:define name="content">
		<h:form id="stockForm">
			<h2>Live Stock Quotes Demo</h2>
			<p:dataTable id="stockBoard" var="stockQuote" value="#{stockBoardPushBean.stockQuoteList}" rowStyleClass="#{stockQuote.priceChangeDirection eq 'UNCHANGED' ? 'yellow' : (stockQuote.priceChangeDirection eq 'UP' ? 'green': 'red')}">
				<p:columnGroup type="header">
					<p:row>
						<p:column colspan="2" headerText="Symbol"/>
						<p:column headerText="Prev Close" />
						<p:column headerText="Open" />
						<p:column headerText="Price" />
						<p:column headerText="Change" />
						<p:column headerText="Bid" />
						<p:column headerText="Ask" />
						<p:column headerText="Volume" />
					</p:row>
				</p:columnGroup>

				<p:column>  
		            <h:outputText value="#{stockQuote.symbol}"/>
		        </p:column>
		                
		        <p:column styleClass="sign">
		        	<h:outputText value="■" style="font-size:12pt;" rendered="#{stockQuote.priceChangeDirection=='UNCHANGED'}"/>
		            <h:outputText value="▲" rendered="#{stockQuote.priceChangeDirection=='UP'}"/>
		            <h:outputText value="▼" rendered="#{stockQuote.priceChangeDirection=='DOWN'}"/>    
		        </p:column>
		          
		  		<p:column>  
		            <h:outputText value="#{stockQuote.previousClose}" />  
		        </p:column>  
		        
		        <p:column>  
		            <h:outputText value="#{stockQuote.openPrice}" />  
		        </p:column>  
		        
		        <p:column>  
		            <h:outputText value="#{stockQuote.currentPrice}" />  
		        </p:column>
		          
		        <p:column>
		        	<h:outputText value=" " rendered="#{stockQuote.priceChangeDirection=='UNCHANGED'}"/>
		            <h:outputText value="+" rendered="#{stockQuote.priceChangeDirection=='UP'}"/>
		            <h:outputText value="-" rendered="#{stockQuote.priceChangeDirection=='DOWN'}"/>   
		            <h:outputText value="#{stockQuote.percentOfChange}" />
		            <h:outputText value="%" />  
		        </p:column>
		        <p:column>  
		            <h:outputText value="#{stockQuote.bidPrice}" />  
		        </p:column>
		        <p:column>  
		            <h:outputText value="#{stockQuote.askPrice}" />  
		        </p:column>
		         <p:column>  
		            <h:outputText value="#{stockQuote.volume}" />  
		        </p:column>
		    </p:dataTable> 
		    <p:remoteCommand process="@this" name="stockBoardLoad" update="stockForm:stockBoard" id="stockBoardUpdate" />
		</h:form>
		<p:socket onMessage="stockBoardLoad" channel="/stockQuotes" widgetVar="stockQuoteSocket" autoConnect="true" />
	</ui:define>
	<ui:define name="footer">
	</ui:define>
</ui:composition>